<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          //更多配置详见官方文档 https://tailwindcss.com/docs/configuration
          extend: {
            colors: {
              primary: '#409EFF',
              success: '#67C23A',
              warning: '#E6A23C',
              danger: '#F56C6C',
              info: '#909399',
            },
          },
        },
      }
    </script>
    <title>Customization</title>
  </head>
  <body class="bg-black sm:bg-green-800 md:bg-blue-800 lg:bg-yellow-800 xl:bg-purple-800 2xl:bg-orange-800">
    <h1 class="text-white text-xl"></h1>
    <button class="bg-primary text-white rounded w-20 text-lg">primary</button>
    <button class="bg-success text-white rounded w-20 text-lg">success</button>
    <button class="bg-warning text-white rounded w-20 text-lg">warning</button>
    <button class="bg-danger text-white rounded w-20 text-lg">danger</button>
    <button class="bg-info text-white rounded w-20 text-lg">info</button>

    <script>
      function showBrowserWidth() {
        const width = window.innerWidth

        document.querySelector('h1').innerHTML = `Width: ${width}`
      }

      window.onload = showBrowserWidth
      window.onresize = showBrowserWidth
    </script>
  </body>
</html>

<!-- Breakpoint Classes
    sm	640px	  @media (min-width: 640px) { ... }
    md	768px	  @media (min-width: 768px) { ... }
    lg	1024px	@media (min-width: 1024px) { ... }
    xl	1280px	@media (min-width: 1280px) { ... }
    2xl	1536px	@media (min-width: 1536px) { ... }
  -->
